<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>highlight.less</title>
<meta name="generator" content="KF5::SyntaxHighlighting (LESSCSS)"/>
</head><body style="color:#1f1c1b"><pre>
<span style="color:#898887;">/**</span>
<span style="color:#898887;"> * Less syntax highlighting test file</span>
<span style="color:#898887;"> *</span>
<span style="color:#898887;"> * Based on the Less documentation ((c) 2017 Alexis Sellier, the Less Core Team, Contributors, The MIT License)</span>
<span style="color:#898887;"> *</span>
<span style="color:#898887;"> * @see http://lesscss.org/features/</span>
<span style="color:#898887;"> */</span>

<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>; <span style="color:#0057ae;">@padding</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">2</span>) {
  <span style="font-style:italic;">colorr</span>: <span style="color:#0057ae;">@color</span>;
  padding-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>;
  <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span>;
}

<span style="color:#0057ae;">@my-ruleset:</span> {
  <span style="color:#644a9b;">.my-selector</span> {
    <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
  }
};

<span style="color:#0057ae;">@bacon:</span> <span style="color:#aa5500;">red</span>;
<span style="color:#0057ae;">@beacon:</span> background-color;
<span style="color:#0057ae;">@baecon:</span> <span style="color:#0057ae;">@{w}</span> + <span style="color:#0057ae;">@w</span>;

<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.class</span> <span style="color:#006e28;font-weight:bold;">#sh</span><span style="color:#b08000;">:extend</span>(<span style="color:#006e28;font-weight:bold;">#hhh</span>) ) {}
<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:nth-child</span>(w: <span style="color:#aa5500;">red</span>) {}

<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#0057ae;">@width2</span>) <span style="font-weight:bold;">and</span> <span style="color:#b08000;">handheld</span> {
  <span style="font-weight:bold;">height</span>: <span style="color:#644a9b;font-weight:bold;">auto</span>;
}

<span style="color:#644a9b;">.test</span> <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@color</span> = <span style="color:#aa5500;">blue</span>) <span style="color:#644a9b;">.ffff</span> {<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;}

<span style="color:#644a9b;">.foo</span> (<span style="color:#0057ae;">@bg</span>: <span style="color:#aa5500;">#f5f5f5</span>, <span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">#900</span>) {
  <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@bg</span>;
  <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span>;

  <span style="color:#644a9b;">.x</span> {
    <span style="font-style:italic;">x</span>: <span style="color:#0057ae;">@nn</span>;
    <span style="font-style:italic;">a</span>: <span style="color:#aa5500;">white</span> <span style="color:#0057ae;">@{nn@{ww}}</span>;
    <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span>;
  }
}

<span style="color:#898887;">// Variables</span>

<span style="color:#0057ae;">@link-color:</span>        <span style="color:#aa5500;">#428bca</span>; <span style="color:#898887;">// sea blue</span>
<span style="color:#0057ae;">@link-color-hover:</span>  <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@link-color</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>);

a, <span style="color:#644a9b;">.link</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@link-color</span>;
}

a<span style="color:#b08000;">:hover</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@link-color-hover</span>;
}

<span style="color:#644a9b;">.widget</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#fff</span>;
  <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@link-color</span>;
}

<span style="color:#898887;">// Variable interpolation</span>

<span style="color:#0057ae;">@my-selector:</span> banner;

<span style="color:#644a9b;">.</span><span style="color:#0057ae;">@{my-selector}</span> <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@s</span> = <span style="color:#644a9b;font-weight:bold;">calc</span>(<span style="color:#bf0303;">&quot;s&quot;</span>); <span style="color:#0057ae;">@{s}</span> = <span style="color:#644a9b;font-weight:bold;">calc</span>(<span style="color:#bf0303;">&quot;dddd&quot;</span>)) {
  <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
  <span style="font-weight:bold;">line-height</span>+: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>;
  <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span> <span style="color:#644a9b;font-weight:bold;">auto</span>;
}

<span style="color:#0057ae;">@images:</span> <span style="color:#bf0303;">&quot;../img&quot;</span>;

body {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#444</span>;
  <span style="font-weight:bold;">background</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;</span><span style="color:#0057ae;">@{images}</span><span style="color:#bf0303;">/white-sand.png&quot;</span>);
}

<span style="color:#0057ae;">@themes:</span> <span style="color:#bf0303;">&quot;../../src/themes&quot;</span>;

<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;</span><span style="color:#0057ae;">@{themes}</span><span style="color:#bf0303;">/tidal-wave.less&quot;</span>;

<span style="color:#0057ae;">@property:</span> color;

<span style="color:#644a9b;">.widget</span> {
  <span style="color:#0057ae;">@{property}</span>: <span style="color:#aa5500;">#0ee</span>;
  <span style="font-style:italic;">background-</span><span style="color:#0057ae;">@{property}</span>: <span style="color:#aa5500;">#999</span>;
}

<span style="color:#898887;">// Variable names</span>

<span style="color:#0057ae;">@fnord:</span>  <span style="color:#bf0303;">&quot;I am fnord.&quot;</span>;
<span style="color:#0057ae;">@var:</span>    <span style="color:#bf0303;">&quot;fnord&quot;</span>;

<span style="color:#644a9b;">.variable-names-example</span> {
  <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">@@var</span>;
}

<span style="color:#898887;">// Lazy Evaluation</span>

<span style="color:#644a9b;">.lazy-eval</span> {
  <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">@var</span>;
}

<span style="color:#0057ae;">@var:</span> <span style="color:#0057ae;">@a</span>;
<span style="color:#0057ae;">@a:</span> <span style="color:#b08000;">9</span><span style="color:#0057ae;">%</span>;

<span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">0</span>;
<span style="color:#644a9b;">.class</span> {
  <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">1</span>;
  <span style="color:#644a9b;">.brass</span> {
    <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">2</span>;
    <span style="font-style:italic;">three</span>: <span style="color:#0057ae;">@var</span>;
    <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">3</span>;
  }
  <span style="font-style:italic;">one</span>: <span style="color:#0057ae;">@var</span>;
}

<span style="color:#898887;">// Default Variables</span>

<span style="color:#0057ae;">@base-color:</span> <span style="color:#aa5500;">green</span>;
<span style="color:#0057ae;">@dark-color:</span> <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@base-color</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>);

<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;library.less&quot;</span>;
<span style="color:#0057ae;">@base-color:</span> <span style="color:#aa5500;">red</span>;

<span style="color:#898887;">// Extend</span>

nav ul {
  &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.inline</span>);
  <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">blue</span>;
}
<span style="color:#644a9b;">.inline</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
}

<span style="color:#898887;">// Extend Syntax</span>

<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.f</span>) {}
<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.g</span>) {}

<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.f</span>, <span style="color:#644a9b;">.g</span>) {}

<span style="color:#898887;">// Extend Attached to Selector</span>

<span style="color:#644a9b;">.big-division</span>,
<span style="color:#644a9b;">.big-bag</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.bag</span>),
<span style="color:#644a9b;">.big-bucket</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.bucket</span>) {
}

<span style="color:#898887;">// Extend Inside Ruleset</span>

pre<span style="color:#b08000;">:hover</span>,
<span style="color:#644a9b;">.some-class</span> {
  &amp;<span style="color:#b08000;">:extend</span>(div pre);
}

pre<span style="color:#b08000;">:hover:extend</span>(div pre),
<span style="color:#644a9b;">.some-class</span><span style="color:#b08000;">:extend</span>(div pre) {}

<span style="color:#898887;">// Extending Nested Selectors</span>

<span style="color:#644a9b;">.bucket</span> {
  tr {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
  }
}
<span style="color:#644a9b;">.some-class</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.bucket</span> tr) {}

<span style="color:#898887;">// Exact Matching with Extend</span>

*<span style="color:#644a9b;">.class</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
}
<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.class</span>) {}

link<span style="color:#b08000;">:hover:visited</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
}
<span style="color:#644a9b;">.selector</span><span style="color:#b08000;">:extend</span>(link<span style="color:#b08000;">:visited:hover</span>) {}

<span style="color:#898887;">// nth Expression</span>

<span style="color:#b08000;">:nth-child</span>(<span style="color:#b08000;">1</span>n<span style="color:#b08000;">+3</span>) {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
}
<span style="color:#644a9b;">.child</span><span style="color:#b08000;">:extend</span>(<span style="color:#b08000;">:nth-child</span>(n+3)) {}

<span style="color:#0095ff;font-weight:bold;">[title=identifier]</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
}
<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">'identifier'</span><span style="color:#0095ff;font-weight:bold;">]</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
}
<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">&quot;identifier&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
}

<span style="color:#644a9b;">.noQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=identifier]</span>) {}
<span style="color:#644a9b;">.singleQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">'identifier'</span><span style="color:#0095ff;font-weight:bold;">]</span>) {}
<span style="color:#644a9b;">.doubleQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">&quot;identifier&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>) {}

<span style="color:#898887;">// Extend &quot;all&quot;</span>

<span style="color:#644a9b;">.a.b.test</span>,
<span style="color:#644a9b;">.test.c</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">orange</span>;
}
<span style="color:#644a9b;">.test</span> {
  &amp;<span style="color:#b08000;">:hover</span> {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
  }
}

<span style="color:#644a9b;">.replacement</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.test</span> all) {}

<span style="color:#898887;">// Selector Interpolation with Extend</span>

<span style="color:#644a9b;">.bucket</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
}
<span style="color:#0057ae;">@{variable}</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.bucket</span>) {}
<span style="color:#0057ae;">@variable:</span> <span style="color:#b08000;">.</span>selector;

<span style="color:#898887;">// Scoping / Extend Inside @media</span>

<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
  <span style="color:#644a9b;">.screenClass</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.selector</span>) {}
  <span style="color:#644a9b;">.selector</span> {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>;
  }
}
<span style="color:#644a9b;">.selector</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
}
<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> {
  <span style="color:#644a9b;">.selector</span> {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
  }
}

<span style="color:#898887;">// Use Cases for Extend</span>

<span style="color:#644a9b;">.animal</span> {
  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">white</span>;
}
<span style="color:#644a9b;">.bear</span> {
  &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.animal</span>);
  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">brown</span>;
}

<span style="color:#644a9b;">.my-inline-block</span> {
  <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>;
  <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">0</span>;
}
<span style="color:#644a9b;">.thing1</span> {
  &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.my-inline-block</span>);
}
<span style="color:#644a9b;">.thing2</span> {
  &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.my-inline-block</span>);
}

<span style="color:#898887;">// Mixins</span>

<span style="color:#644a9b;">.a</span>, <span style="color:#006e28;font-weight:bold;">#b</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
}
<span style="color:#644a9b;">.mixin-class</span> {
  <span style="color:#644a9b;">.a</span>();
}
<span style="color:#644a9b;">.mixin-id</span> {
  <span style="color:#006e28;font-weight:bold;">#b</span>();
}

<span style="color:#898887;">// Not Outputting the Mixin</span>

<span style="color:#644a9b;">.my-mixin</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>;
}
<span style="color:#644a9b;">.my-other-mixin</span>() {
  <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">white</span>;
}
<span style="color:#644a9b;">.class</span> {
  <span style="color:#644a9b;">.my-mixin</span>;
  <span style="color:#644a9b;">.my-other-mixin</span>;
}

<span style="color:#898887;">// Selectors in Mixins</span>

<span style="color:#644a9b;">.my-hover-mixin</span>() {
  &amp;<span style="color:#b08000;">:hover</span> {
    <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#aa5500;">red</span>;
  }
}
button {
  <span style="color:#644a9b;">.my-hover-mixin</span>();
}

<span style="color:#898887;">// Namespaces</span>

<span style="color:#006e28;font-weight:bold;">#outer</span> {
  <span style="color:#644a9b;">.inner</span> {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
  }
}

<span style="color:#644a9b;">.c</span> {
  <span style="color:#006e28;font-weight:bold;">#outer</span> &gt; <span style="color:#644a9b;">.inner</span>;
}

<span style="color:#644a9b;">.d</span> {
  <span style="color:#006e28;font-weight:bold;">#outer</span> &gt; <span style="color:#644a9b;">.inner</span>;
  <span style="color:#006e28;font-weight:bold;">#outer</span> &gt; <span style="color:#644a9b;">.inner</span>();
  <span style="color:#006e28;font-weight:bold;">#outer</span> <span style="color:#644a9b;">.inner</span>;
  <span style="color:#006e28;font-weight:bold;">#outer</span> <span style="color:#644a9b;">.inner</span>();
  <span style="color:#006e28;font-weight:bold;">#outer</span><span style="color:#644a9b;">.inner</span>;
  <span style="color:#006e28;font-weight:bold;">#outer</span><span style="color:#644a9b;">.inner</span>();
}

<span style="color:#898887;">// Guarded Namespaces</span>

<span style="color:#006e28;font-weight:bold;">#namespace</span> <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@mode</span>=huge) {
  <span style="color:#644a9b;">.mixin</span>() { <span style="color:#898887;">/* */</span> }
}

<span style="color:#006e28;font-weight:bold;">#namespace</span> {
  <span style="color:#644a9b;">.mixin</span>() <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@mode</span>=huge) { <span style="color:#898887;">/* */</span> }
}

<span style="color:#006e28;font-weight:bold;">#sp_1</span> <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) {
  <span style="color:#006e28;font-weight:bold;">#sp_2</span> <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) {
    <span style="color:#644a9b;">.mixin</span>() <span style="font-weight:bold;">when not</span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) { <span style="color:#898887;">/* */</span> }
  }
}

<span style="color:#898887;">// The !important keyword</span>

<span style="color:#644a9b;">.foo</span> (<span style="color:#0057ae;">@bg</span>: <span style="color:#aa5500;">#f5f5f5</span>, <span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">#900</span>) {
  <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@bg</span>;
  <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span> <span style="color:#0057ae;">!important</span>;
}
<span style="color:#644a9b;">.unimportant</span> {
  <span style="color:#644a9b;">.foo</span>();
}
<span style="color:#644a9b;">.important</span> {
  <span style="color:#644a9b;">.foo</span>() <span style="color:#0057ae;">!important</span>;
}

<span style="color:#898887;">// Parametric Mixins</span>

<span style="color:#644a9b;">.border-radius</span>(<span style="color:#0057ae;">@radius</span>) {
  <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">@radius</span>;
     <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">@radius</span>;
          <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">@radius</span>;
}

<span style="color:#006e28;font-weight:bold;">#header</span> {
  <span style="color:#644a9b;">.border-radius</span>(<span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span>);
}
<span style="color:#644a9b;">.button</span> {
  <span style="color:#644a9b;">.border-radius</span>(<span style="color:#b08000;">6</span><span style="color:#0057ae;">px</span>);
}

<span style="color:#644a9b;">.border-radius</span>(<span style="color:#0057ae;">@radius</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>) {
  <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">@radius</span>;
     <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">@radius</span>;
          <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">@radius</span>;
}

<span style="color:#644a9b;">.wrap</span>() {
  <span style="font-weight:bold;">text-wrap</span>: wrap;
  <span style="font-weight:bold;">white-space</span>: -moz-pre-wrap;
  <span style="font-weight:bold;">white-space</span>: <span style="color:#b08000;">pre-wrap</span>;
  <span style="font-weight:bold;">word-wrap</span>: break-word;
}

pre { <span style="color:#644a9b;">.wrap</span> }

<span style="color:#898887;">// Mixins with Multiple Parameters</span>

<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>) {
  color-1<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@color</span>;
}
<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>; <span style="color:#0057ae;">@padding</span>: <span style="color:#b08000;">2</span>) {
  color-2<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@color</span>;
  padding-2<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>;
}
<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>; <span style="color:#0057ae;">@padding</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">2</span>) {
  color-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@color</span>;
  padding-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>;
  <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span>;
}
<span style="color:#644a9b;">.some</span> <span style="color:#644a9b;">.selector</span> div {
  <span style="color:#644a9b;">.mixin</span>(<span style="color:#aa5500;">#008000</span>);
}

<span style="color:#898887;">// Named parameters</span>

<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">black</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>; <span style="color:#0057ae;">@padding</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>) {
  <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span>;
  <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span>;
  <span style="font-weight:bold;">padding</span>: <span style="color:#0057ae;">@padding</span>;
}
<span style="color:#644a9b;">.class1</span> {
  <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>; <span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">#33acfe</span>);
}
<span style="color:#644a9b;">.class2</span> {
  <span style="color:#644a9b;">.mixin</span>(<span style="color:#aa5500;">#efca44</span>; <span style="color:#0057ae;">@padding</span>: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>);
}

<span style="color:#898887;">// The @arguments Variable</span>

<span style="color:#644a9b;">.box-shadow</span>(<span style="color:#0057ae;">@x</span>: <span style="color:#b08000;">0</span>; <span style="color:#0057ae;">@y</span>: <span style="color:#b08000;">0</span>; <span style="color:#0057ae;">@blur</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>; <span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">#000</span>) {
  <span style="font-weight:bold;">-webkit-box-shadow</span>: <span style="color:#0057ae;">@arguments</span>;
     <span style="font-weight:bold;">-moz-box-shadow</span>: <span style="color:#0057ae;">@arguments</span>;
          <span style="font-weight:bold;">box-shadow</span>: <span style="color:#0057ae;">@arguments</span>;
}
<span style="color:#644a9b;">.big-block</span> {
  <span style="color:#644a9b;">.box-shadow</span>(<span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>; <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>);
}

<span style="color:#898887;">// Advanced Arguments and the @rest Variable</span>

<span style="color:#644a9b;">.mixin</span>(<span style="color:#b08000;">...</span>) {}        <span style="color:#898887;">// matches 0-N arguments</span>
<span style="color:#644a9b;">.mixin</span>() {}           <span style="color:#898887;">// matches exactly 0 arguments</span>
<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>: <span style="color:#b08000;">1</span>) {}      <span style="color:#898887;">// matches 0-1 arguments</span>
<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>: <span style="color:#b08000;">1</span>; <span style="color:#b08000;">...</span>) {} <span style="color:#898887;">// matches 0-N arguments</span>
<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>; <span style="color:#b08000;">...</span>) {}    <span style="color:#898887;">// matches 1-N arguments</span>

<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@rest</span><span style="color:#b08000;">...</span>) {
   <span style="color:#898887;">// @rest is bound to arguments after @a</span>
   <span style="color:#898887;">// @arguments is bound to all arguments</span>
}

<span style="color:#898887;">// Pattern-matching</span>

<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@s</span>; <span style="color:#0057ae;">@color</span>) { <span style="color:#644a9b;">...</span> }

<span style="color:#644a9b;">.class</span> {
  <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@switch</span>; <span style="color:#aa5500;">#888</span>);
}

<span style="color:#644a9b;">.mixin</span>(dark; <span style="color:#0057ae;">@color</span>) {
  <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@color</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>);
}
<span style="color:#644a9b;">.mixin</span>(<span style="color:#b08000;">light</span>; <span style="color:#0057ae;">@color</span>) {
  <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;font-weight:bold;">lighten</span>(<span style="color:#0057ae;">@color</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>);
}
<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@_</span>; <span style="color:#0057ae;">@color</span>) {
  <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span>;
}

<span style="color:#0057ae;">@switch:</span> <span style="color:#b08000;">light</span>;

<span style="color:#644a9b;">.class</span> {
  <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@switch</span>; <span style="color:#aa5500;">#888</span>);
}

<span style="color:#898887;">// Mixins as Functions</span>

<span style="color:#644a9b;">.average</span>(<span style="color:#0057ae;">@x</span>, <span style="color:#0057ae;">@y</span>) {
  <span style="color:#0057ae;">@average:</span> ((<span style="color:#0057ae;">@x</span> + <span style="color:#0057ae;">@y</span>) / <span style="color:#b08000;">2</span>);
}

div {
  <span style="color:#644a9b;">.average</span>(<span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>); <span style="color:#898887;">// &quot;call&quot; the mixin</span>
  <span style="font-weight:bold;">padding</span>: <span style="color:#0057ae;">@average</span>;    <span style="color:#898887;">// use its &quot;return&quot; value</span>
}

<span style="color:#898887;">// Passing Rulesets to Mixins</span>

<span style="color:#898887;">// declare detached ruleset</span>
<span style="color:#0057ae;">@detached-ruleset:</span> { <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span>; };

<span style="color:#898887;">// use detached ruleset</span>
<span style="color:#644a9b;">.top</span> {
    <span style="color:#ff5500;">@detached-ruleset</span>();
}

<span style="color:#644a9b;">.desktop-and-old-ie</span>(<span style="color:#0057ae;">@rules</span>) {
  <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">1200</span><span style="color:#0057ae;">px</span>) { <span style="color:#ff5500;">@rules</span>(); }
  html<span style="color:#644a9b;">.lt-ie9</span> &amp;                         { <span style="color:#ff5500;">@rules</span>(); }
}

header {
  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">blue</span>;

  <span style="color:#644a9b;">.desktop-and-old-ie</span>({
    background-color: <span style="color:#aa5500;">red</span>;
  });
}

<span style="color:#0057ae;">@my-ruleset:</span> {
  <span style="color:#644a9b;">.my-selector</span> {
    <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
  }
};

<span style="color:#0057ae;">@my-ruleset:</span> {
    <span style="color:#644a9b;">.my-selector</span> {
      <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">tv</span> {
        <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
      }
    }
  };
<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">portrait</span>) {
    <span style="color:#ff5500;">@my-ruleset</span>();
}

<span style="color:#898887;">// Scoping</span>

<span style="color:#0057ae;">@detached-ruleset:</span> {
  <span style="font-style:italic;">caller-variable</span>: <span style="color:#0057ae;">@caller-variable</span>; <span style="color:#898887;">// variable is undefined here</span>
  <span style="color:#644a9b;">.caller-mixin</span>(); <span style="color:#898887;">// mixin is undefined here</span>
};

selector {
  <span style="color:#898887;">// use detached ruleset</span>
  <span style="color:#ff5500;">@detached-ruleset</span>();

  <span style="color:#898887;">// define variable and mixin needed inside the detached ruleset</span>
  <span style="color:#0057ae;">@caller-variable:</span> value;
  <span style="color:#644a9b;">.caller-mixin</span>() {
    <span style="font-style:italic;">variable</span>: declaration;
  }
}

<span style="color:#898887;">/*</span>
<span style="color:#898887;"> * reference: use a Less file but do not output it</span>
<span style="color:#898887;">inline: include the source file in the output but do not process it</span>
<span style="color:#898887;">less: treat the file as a Less file, no matter what the file extension</span>
<span style="color:#898887;">css: treat the file as a CSS file, no matter what the file extension</span>
<span style="color:#898887;">once: only include the file once (this is default behavior)</span>
<span style="color:#898887;">multiple: include the file multiple times</span>
<span style="color:#898887;">optional: continue compiling when file is not found</span>
<span style="color:#898887;"> */</span>

<span style="color:#ff5500;">@import</span> (optional, reference) <span style="color:#bf0303;">&quot;foo.less&quot;</span>;

<span style="color:#898887;">// Mixin Guards</span>

<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">lightness</span>(<span style="color:#0057ae;">@a</span>) &gt;= <span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>) {
  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
}
<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">lightness</span>(<span style="color:#0057ae;">@a</span>) &lt; <span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>) {
  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">white</span>;
}
<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) {
  <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@a</span>;
}

<span style="color:#898887;">// Guard Comparison Operators</span>

<span style="color:#644a9b;">.truth</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span>) { }
<span style="color:#644a9b;">.truth</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span> = true) { }

<span style="color:#898887;">// FIXME: @media as variable</span>
<span style="color:#0057ae;">@media:</span> mobile;

<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@media</span> = mobile) { }
<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@media</span> = desktop) { }

<span style="color:#644a9b;">.max</span> (<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@b</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span> &gt; <span style="color:#0057ae;">@b</span>) { <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">@a</span> }
<span style="color:#644a9b;">.max</span> (<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@b</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span> &lt; <span style="color:#0057ae;">@b</span>) { <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">@b</span> }

<span style="color:#898887;">// Guard Logical Operators</span>

<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">isnumber</span>(<span style="color:#0057ae;">@a</span>)) and (<span style="color:#0057ae;">@a</span> &gt; <span style="color:#b08000;">0</span>) {  }
<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span> &gt; <span style="color:#b08000;">10</span>), (<span style="color:#0057ae;">@a</span> &lt; <span style="color:#b08000;">-10</span>) {  }
<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@b</span>) <span style="font-weight:bold;">when not</span> (<span style="color:#0057ae;">@b</span> &gt; <span style="color:#b08000;">0</span>) { }

<span style="color:#898887;">// Type Checking Functions</span>

<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@b</span>: <span style="color:#b08000;">0</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">isnumber</span>(<span style="color:#0057ae;">@b</span>)) { }
<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@b</span>: <span style="color:#aa5500;">black</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">iscolor</span>(<span style="color:#0057ae;">@b</span>)) {}

button <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@my-option</span> = true) {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">white</span>;

  &amp; <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@my-option</span> = true) {
  button {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">white</span>;
  }
  a {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
  }
}
}

<span style="color:#898887;">// Loops</span>

<span style="color:#644a9b;">.loop</span>(<span style="color:#0057ae;">@counter</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@counter</span> &gt; <span style="color:#b08000;">0</span>) {
  <span style="color:#644a9b;">.loop</span>((<span style="color:#0057ae;">@counter</span> - <span style="color:#b08000;">1</span>));    <span style="color:#898887;">// next iteration</span>
  <span style="font-weight:bold;">width</span>: (<span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> * <span style="color:#0057ae;">@counter</span>); <span style="color:#898887;">// code for each iteration</span>
}

div {
  <span style="color:#644a9b;">.loop</span>(<span style="color:#b08000;">5</span>); <span style="color:#898887;">// launch the loop</span>
}

<span style="color:#898887;">// Merge</span>

<span style="color:#644a9b;">.mixin</span>() {
  <span style="font-weight:bold;">box-shadow</span>+: <span style="color:#b08000;">inset</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#aa5500;">#555</span>;
}
<span style="color:#644a9b;">.myclass</span> {
  <span style="color:#644a9b;">.mixin</span>();
  <span style="font-weight:bold;">box-shadow</span>+: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span> <span style="color:#aa5500;">black</span>;
}

<span style="color:#898887;">// Space</span>

<span style="color:#644a9b;">.mixin</span>() {
  <span style="font-weight:bold;">transform</span>+_: <span style="color:#644a9b;font-weight:bold;">scale</span>(<span style="color:#b08000;">2</span>);
}
<span style="color:#644a9b;">.myclass</span> {
  <span style="color:#644a9b;">.mixin</span>();
  <span style="font-weight:bold;">transform</span>+_: <span style="color:#644a9b;font-weight:bold;">rotate</span>(<span style="color:#b08000;">15</span><span style="color:#0057ae;">deg</span>);
}

<span style="color:#898887;">// Parent Selectors</span>

a {
  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
  &amp;<span style="color:#b08000;">:hover</span> {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
  }
}

<span style="color:#644a9b;">.button</span> {
  &amp;-ok {
    <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;ok.png&quot;</span>);
  }
  &amp;-cancel {
    <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;cancel.png&quot;</span>);
  }

  &amp;-custom {
    <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;custom.png&quot;</span>);
  }
}

<span style="color:#644a9b;">.link</span> {
  &amp; + &amp; {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
  }

  &amp; &amp; {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
  }

  &amp;&amp; {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
  }

  &amp;, &amp;ish {
    <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">cyan</span>;
  }
}

<span style="color:#644a9b;">.grand</span> {
  <span style="color:#644a9b;">.parent</span> {
    &amp; &gt; &amp; {
      <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
    }

    &amp; &amp; {
      <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
    }

    &amp;&amp; {
      <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
    }

    &amp;, &amp;ish {
      <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">cyan</span>;
    }
  }
}

<span style="color:#898887;">// Changing Selector Order</span>

<span style="color:#644a9b;">.header</span> {
  <span style="color:#644a9b;">.menu</span> {
    <span style="font-weight:bold;">border-radius</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>;
    <span style="color:#644a9b;">.no-borderradius</span> &amp; {
      <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">'images/button-background.png'</span>);
    }
  }
}

<span style="color:#898887;">// Combinatorial Explosion</span>

p, a, ul, li {
  <span style="font-weight:bold;">border-top</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">dotted</span> <span style="color:#aa5500;">#366</span>;
  &amp; + &amp; {
    <span style="font-weight:bold;">border-top</span>: <span style="color:#b08000;">0</span>;
  }
}
</pre></body></html>
